<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>login</title>
    <style type="text/css">
        body {
            background-color: #ffffff;
            text-align: center;
        }

        .lp-login {
            position: absolute;
            width: 500px;
            height: 300px;
            top: 50%;
            left: 50%;
            margin-top: -250px;
            margin-left: -250px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 0 10px #12a591;
            padding: 57px 50px 35px;
            box-sizing: border-box
        }

        .lp-login .submitBtn {
            display: block;
            text-decoration: none;
            height: 48px;
            width: 150px;
            line-height: 48px;
            font-size: 16px;
            color: #fff;
            text-align: center;
            background-image: -webkit-gradient(linear, left top, right top, from(#09cb9d), to(#02b389));
            background-image: linear-gradient(90deg, #09cb9d, #02b389);
            border-radius: 3px
        }

        input[type='text'] {
            height: 30px;
            width: 250px;
        }

        input[type='password'] {
            height: 30px;
            width: 250px;
        }

        span {
            font-style: normal;
            font-variant-ligatures: normal;
            font-variant-caps: normal;
            font-variant-numeric: normal;
            font-variant-east-asian: normal;
            font-weight: normal;
            font-stretch: normal;
            font-size: 14px;
            line-height: 22px;
            font-family: "Hiragino Sans GB", "Microsoft Yahei", SimSun, Arial, "Helvetica Neue", Helvetica;
        }
    </style>
    <script type="text/javascript" src="/static/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //添加绑定事件
            $(".submitBtn").click(
                function () {
                    submit();
                }
            );
        });

        function submit() {
            var username = $("input[name='username']").val();
            var password = $("input[name='password']").val();
            if (!username) {
                alert("请填写用户！");
                return false;
            }
            if (!password) {
                alert("请填写密码！");
                return false;
            }
            //登录
            $.ajax({
                url: "/api/user/login/" + encodeURIComponent(username) + "/" + password,
                success: function (result) {
                    if (result == "未注册") {
                        alert("未注册，请先注册！");
                        return false;
                    }
                    if (result == "密码错误") {
                        alert("密码错误，请确认！");
                        return false;
                    }
                    if (result == "登录成功") {
                        alert("登录成功！");
                        window.location.href = "http://www.abc.com/static/welcome.html?email=" + username;
                    }
                }
            });
        }
    </script>
</head>
<body>
<div>
    <div>
        <form method="post">
            <table class="lp-login">
                <tr>
                    <td align="right"><span>用户</span></td>
                    <td align="center">
                        <input type="text" name="username"/>
                    </td>
                </tr>
                <tr>
                    <td align="right"><span>密码</span></td>
                    <td align="center">
                        <input type="password" name="password"/>
                    </td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input id="submitBtn" type="button" class="submitBtn" value="登录"/>
                        <div style="margin-top: 10px"><a href="registry.html">注册新账号</a></div>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
</body>
</html>